<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="java.io.*,java.util.*" %>
<%@ page import="javax.servlet.*,java.text.*" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
	<head>
	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
  <body>
  	<h2>All employee</h2>
  	<table border="1" style="padding:10px;">
  	<c:if test="${not empty listRecord}">
  		<tr style="width:100px;">
  			<th style="width:50px;">Index</th>
  			<th style="width:50px;">Key</th>
  			<th style="width:50px;">FirstName</th>
  			<th style="width:50px;">LastName</th>
  			<th style="width:50px;">HireDate</th>  		
  			<th style="width:50px;">Edit</th>  
  			<th style="width:50px;">Delete</th>  	
  		</tr>
  	<c:set var="index" value="${0}"/>
	<c:forEach var="record" items="${listRecord}">
    	<c:set var="index" value="${index + 1}"/>
		<tr style="width:100px;">
			<td><c:out value="${index}"/></td>
			<td>${record.key}</td>
			<td>${record.firstName}</td>
			<td>${record.lastName}</td>
			<td><fmt:formatDate pattern="yyyy-MM-dd"  value="${record.hireDate}"/></td>
			<td><button id = "editEmployee" onclick="editEmployee('${record.key}','${record.firstName}','${record.lastName}','<fmt:formatDate pattern="yyyy-MM-dd"  value="${record.hireDate}"/>')">Edit</button></td>
			<td><button id = "deleteEmployee" onclick="deleteEmployee('${record.key}')">Delete</button></td>
		</tr>
	</c:forEach>
	</c:if>
	</table>
	<p style="padding:30px"></p>
	<p><h2>Insert new employee:</h2></p>
    <form action="/bigtable" method="post">
    	<label for="firstName">First Name:</label>
      	<input type="text" name="firstName" required/>
      	<label for="lastName">Last Name:</label>
      	<input type="text" name="lastName" required/>
      	<label for="hireDate">Hired Date:</label>
      	<input type="date" name="hireDate" required/>
      	<input type="text" name="key" style="display:none"/>
      	<div style ="margin-top:15px;"><input type="submit" id="putEmployee" value="Insert" /> <button style="display:none;margin-left:10px" id = "cancelBtn" onclick="cancelUpdate()">Cancel</button></div>
      	
    </form>
  </body>
  <script style="text/javascript">
  	function editEmployee(employeeKey, firstName, lastName, hireDate){
  		//alert(employeeKey);
  		$( "input[name*='key']" ).val(employeeKey);
  		//alert(firstName);
  		$( "input[name*='firstName']" ).val(firstName);
  		//alert(lastName);
  		$( "input[name*='lastName']" ).val(lastName);
  		//alert(hireDate);
  		$( "input[name*='hireDate']" ).val(hireDate);
  		
  		$("#editEmployee").attr('disabled','disabled');
  		$("#deleteEmployee").attr('disabled','disabled');
  		$("#putEmployee").val("Update");
  		$("#cancelBtn").show();
  		
  		
  	}
  	function deleteEmployee(employeeId){
  		//alert(employeeId);
  		$.ajax({
  			url: "/bigtable" + '?' + $.param({'key': employeeId}),
  			type : "GET",
  			success : function(data) {
  				alert(data);
  				window.location.reload();
  			}
  		});
  	}
  	
  	function cancelUpdate(){
  		window.location.reload();
  	}
  </script>
</html>